<template>
    <div>
        <Page ref="page" v-bind="page"></Page>
    </div>
</template>
<script>
import Page from '@/components/Page/index.vue'
import Enums from './enums.js'
import { getRegionList } from '@/api/base/region'
export default {
    components: {
        Page
    },
    data() {
        return {
            page: {
                pageSearchFrame: [
                    {
                        label: '机构',
                        key: 'region_type',
                        options: Enums.REGION_TYPE,
                        placeholder: '全部',
                        frameType: 'select'
                    },
                    {
                        label: '机构区域名称',
                        key: 'region_name',
                        frameType: 'input',
                        placeholder: '精确查询'
                    }
                ],
                pageSearchData: {
                    region_type: 1
                },
                buttons: [{ value: '新增绑定', click: () => this.$router.push('/demo/region/addRegion') }],
                pageTableFrame: [
                    {
                        key: 'shopName',
                        label: '机构名称',
                        visible: true,
                        align: 'center',
                        minWidth: 10,
                        render(data, row) {
                            return Enums.REGION_TYPE.find((v) => v.id == row.regionType).text
                        }
                    },
                    { key: 'shopRegionName', label: '机构区域名称', visible: true, align: 'center', minWidth: 10 },
                    {
                        key: 'bindRegionName',
                        label: '绑定区域名称',
                        visible: true,
                        align: 'center',
                        minWidth: 10,
                        render(data, row) {
                            let res = ''
                            if (row.provinceName && row.provinceName != null) {
                                res = res + row.provinceName
                            }
                            if (row.cityName && row.cityName != null) {
                                res = res + '-' + row.cityName
                            }
                            if (row.districtName && row.districtName != null) {
                                res = res + '-' + row.districtName
                            }
                            return res
                        }
                    }
                ],
                searchFun: getRegionList,
                labelWidth: '100px'
            }
        }
    },
    methods: {
        refresh() {
            this.$refs.page.onSearch()
        }
    }
}
</script>
<style lang="scss">
.el-select,
.el-cascader {
    width: 100%;
}
</style>
